<template>
  <!--
      作者：wangxw
      时间：2020-06-10
      描述：页面-页面列表-修改页面
  -->
  <div v-loading="loading" class="diy-container clearfix">

    <!--类别选择-->
    <!--手机diy容器-->
    <div class="diy-phone diy-audit-preview">
      <Model v-if="!loading" ref="model" :form="form" :defaultData="defaultData" :diyData="diyData"></Model>
    </div>

    <!--参数设置-->
    <div class="diy-info">
      <fieldset disabled style="border: none">
        <Params v-if="!loading" :form="form" :defaultData="defaultData" :diyData="diyData"></Params>
      </fieldset>
    </div>

    <!--提交-->
    <div class="common-button-wrapper" style="height: 100px;">

      <div class="basic-setting-content pl16 pr16 p-fix" v-if="model.is_audit==0">
        <el-form size="small" ref="form" :model="formData" label-width="180px" v-if="!loading">
          <el-form-item label="审核状态：" :rules="[{ required: true, message: '选择审核状态' }]" prop="is_audit">
            <el-radio-group v-model="formData.is_audit">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">未通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核备注：">
            <el-input type="textarea" min="0" v-model="formData.reject_reason" class="mb16 max-w460"
                      placeholder="请输入拒绝原因">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" type="primary" @click="onSubmit()" v-loading="save_loading" v-if="model.is_audit==0">
        审核
      </el-button>
      <el-button size="small" type="info" @click="gotoBack">返回上一页</el-button>
    </div>
  </div>
</template>

<script>
import {deepClone} from '@/utils/base.js'
import PageApi from '@/api/page.js';
import Type from './diy/Type.vue';
import Model from './diy/Model.vue';
import Params from './diy/Params.vue';
import Audit from "@/views/product/product/part/Audit.vue";

export default {
  components: {
    Audit,
    /*组件类别*/
    Type,
    /*组件信息*/
    Model,
    /*参数信息*/
    Params
  },
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*默认数据*/
      defaultData: {},
      /*组件数据列表*/
      diyData: {
        items: []
      },
      opts: {},
      model: {},
      formData: {
        is_audit: 1,
        reject_reason: "",
      },
      save_loading: false,
      /*表单对象*/
      form: {
        umeditor: {},
        /*当前选中*/
        curItem: {},
        /*当前选中的元素（下标）*/
        selectedIndex: -1
      }
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {

    /*获取列表*/
    getData() {
      let self = this;
      self.page_id = self.$route.query.page_id;
      PageApi.editPage(
        {
          page_id: self.page_id
        },
        true
      )
        .then(res => {
          self.defaultData = res.data.defaultData;
          self.diyData = res.data.jsonData;
          self.form.curItem = self.diyData.page;
          self.opts = res.data.opts;
          self.model = res.data.model;
          self.loading = false;
        })
        .catch(error => {
          self.loading = false;
        });
    },

    /*新增Diy组件*/
    onAddItem: function (key) {
      // 复制默认diy组件数据
      let item = deepClone(this.defaultData[key]), cur_index = 0;
      if (this.form.selectedIndex < 0) {
        cur_index = 0;
        this.diyData.items.unshift(item);
      } else {
        cur_index = this.form.selectedIndex + 1;
        this.diyData.items.splice(cur_index, 0, item);
      }
      // 编辑当前选中的元素
      this.$refs.model.onEditer(cur_index);
    },

    /*上架*/
    onSubmit() {
      let self = this;
      self.save_loading = true;
      let page_id = self.page_id;
      PageApi.AuditPage(
        {
          page_id: page_id,
          is_audit: this.formData.is_audit,
          reject_reason: this.formData.reject_reason,
        },
        true
      ).then(data => {
        self.save_loading = false;
        self.$message({
          message: '恭喜你，审核成功',
          type: 'success'
        });
        self.getData();
      }).catch(error => {
        self.save_loading = false;
      });
    },

    /*返回上一页面*/
    gotoBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
@import '@/styles/page/diy.scss';


.diy-phone-container img {
  width: 100%;
}

.diy-audit-preview .btn-edit-del {
  display: none;
}
</style>
